<style lang="less">
@import "./home.less";
</style>
<template>
  <div class="home-main" style="background:#f0f0f0;">
    <Row>
      <Col span="8">
        <Row>
          <Card>
            <Row type="flex" class="user-infor">
              <Col span="8">
                <Row class-name="made-child-con-middle" type="flex" align="middle"></Row>
              </Col>
              <Col span="16" style="padding-left:6px;">
                <Row
                  style="display:block \10;margin-top:30px \10;"
                  class-name="made-child-con-middle"
                  type="flex"
                  align="middle"
                >
                  <b class="card-user-infor-name">{{user.userName}}</b>
                </Row>
              </Col>
            </Row>
            <div class="line-gray"></div>
            <Row class="margin-top-8">
              <Col span="8">
                <p class="notwrap">{{$t('module.home.loginTime')}}</p>
              </Col>
              <Col span="16" class="padding-left-8">2019-7-1 14:30</Col>
            </Row>
            <Row class="margin-top-8">
              <Col span="8">
                <p class="notwrap">IP</p>
              </Col>
              <Col span="16" class="padding-left-8">10.54.26.132</Col>
            </Row>
          </Card>
        </Row>
        <Row class="margin-top-10">
          <Card>
            <p slot="title" class="card-title">
              <Icon type="android-checkbox-outline"></Icon>{{$t('module.home.todoList')}}
            </p>
            <a type="text" slot="extra" @click.prevent="addNewToDoItem">
              <Icon type="md-add"></Icon>
            </a>
            <Modal v-model="showAddNewTodo" :title="$t('module.home.addList')" @on-ok="addNew" @on-cancel="cancelAdd">
              <Row type="flex" justify="center">
                <Input
                  v-model="newToDoItemValue"
                  icon="compose"
                  :placeholder="$t('module.home.enter')"
                  style="width: 300px"
                />
              </Row>
              <Row slot="footer">
                <RPButton optType="cancel" @click="cancelAdd" />
                <RPButton optType="confirm" @click="addNew" />
              </Row>
            </Modal>
            <div class="to-do-list-con">
              <div v-for="(item, index) in toDoList" :key="index" class="to-do-item">
                <to-do-list-item :content="item.title"></to-do-list-item>
              </div>
            </div>
          </Card>
        </Row>
      </Col>
      <Col span="16" class-name="padding-left-5">
        <Row>
          <Col span="6">
            <infor-card
              id-name="user_created_count"
              :end-val="count.createUser"
              iconType="android-person-add"
              color="#ffb403"
              :intro-text="$t('module.home.newUsers')"
            ></infor-card>
          </Col>
          <Col span="6" class-name="padding-left-5">
            <infor-card
              id-name="visit_count"
              :end-val="count.visit"
              iconType="ios-eye"
              color="#64d572"
              :iconSize="50"
              :intro-text="$t('module.home.browseVolume')"
            ></infor-card>
          </Col>
          <Col span="6" class-name="padding-left-5">
            <infor-card
              id-name="collection_count"
              :end-val="count.collection"
              iconType="upload"
              color="#ffd572"
              :intro-text="$t('module.home.dataAcquisition')"
            ></infor-card>
          </Col>
          <Col span="6" class-name="padding-left-5">
            <infor-card
              id-name="transfer_count"
              :end-val="count.transfer"
              iconType="shuffle"
              color="#f25e43"
              :intro-text="$t('module.home.ServiceInvocation')"
            ></infor-card>
          </Col>
        </Row>
        <Row class="margin-top-10">
          <Card :padding="0">
            <p slot="title" class="card-title">{{$t('module.home.InformationAnnouncement')}}</p>
            <div class="map-con" style="overflow:auto;">
              <ul>
                <li v-for="(item,index) in noticeList" :key="index">
                  <br />
                  <!-- <div @click="noticeInfo(item.noticeId)" style="cursor:pointer;display:inline-block;margin-left: 20px">{{item.noticeTitle}}</div> -->
                  <div style="float: right;margin-right: 20px">{{item.createTime}}</div>
                  <br />
                </li>
              </ul>
            </div>
          </Card>
        </Row>
      </Col>
    </Row>
  </div>
</template>

<script>
import countUp from "./components/countUp.vue";
import inforCard from "./components/inforCard.vue";
import mapDataTable from "./components/mapDataTable.vue";
import toDoListItem from "./components/toDoListItem.vue";
// import Preview from "../system/systemNotice/Preview.vue";
// import NoticeListPage from "../system/systemNotice/NoticeListPage.vue";
import { CoreModuleName } from "@/const.js";
import locales from "./locales.js";

export default {
  mixins: [locales],
  components: {
    countUp,
    inforCard,
    mapDataTable,
    toDoListItem
  },
  created: function() {
    // $store.dispatch("GetHomeNoticeList").then(response => {
    //     this.noticeList = response.dataResult;
    //     //this.getNoticeList();
    // });
  },
  data() {
    return {
      noticeList: [],
      toDoList: [
        {
          title: "去iView官网学习完整的iView组件"
        },
        {
          title: "去iView官网学习完整的iView组件"
        },
        {
          title: "去iView官网学习完整的iView组件"
        },
        {
          title: "去iView官网学习完整的iView组件"
        },
        {
          title: "去iView官网学习完整的iView组件"
        }
      ],
      count: {
        createUser: 496,
        visit: 3264,
        collection: 24389305,
        transfer: 39503498
      },
      showAddNewTodo: false,
      newToDoItemValue: ""
    };
  },
  computed: {
    avatorPath() {
      return this.$store.state.avatar;
    },
    user() {
      return this.$store.state[CoreModuleName].userInfo;
    }
  },
  methods: {
    // noticeInfo(obj){
    //     new this.$pageModal(
    //         Preview,
    //         {
    //             props: {
    //                 noticeId: obj
    //             }
    //         },
    //         (data) => {

    //         }
    //     )
    // },
    // getNoticeList(){
    //     if(this.noticeList.length > 0){
    //         new this.$pageModal(
    //             NoticeListPage,
    //             {
    //                 props: {
    //                     // noticeId: obj
    //                 }
    //             },
    //             (data) => {

    //             }
    //         )
    //     }else{
    //         return ;
    //     }
    // },
    addNewToDoItem() {
      this.showAddNewTodo = true;
    },
    addNew() {
      if (this.newToDoItemValue.length !== 0) {
        this.toDoList.unshift({
          title: this.newToDoItemValue
        });
        setTimeout(function() {
          this.newToDoItemValue = "";
        }, 200);
        this.showAddNewTodo = false;
      } else {
        this.$message.error($t('module.home.enterContent'));
      }
    },
    cancelAdd() {
      this.showAddNewTodo = false;
      this.newToDoItemValue = "";
    }
  }
};
</script>
